<template>
  <div class="container">
    <div class="header"></div>
    <div class="title">
      <h4>小米账号登录</h4>
    </div>
    <div class="log">
      <span><img src="https://static.account.xiaomi.com/uiTheme/images/miotstore/logo.svg" alt=""></span>
        <p>欢迎登录小米有品</p>
    </div>
    <div class="content">
      <form action="">
        <input type="text" placeholder="邮箱/ 手机号码/小米ID" v-model="model.name">
        <input type="text" placeholder="请输入密码" v-model="model.pwd">
        <div>
	        <el-checkbox v-model="checked"></el-checkbox>
          <span>已阅读并同意小米账号用户协议和隐私政策</span>
        </div>
        <button :class="{active:!checked}" type="button" @click="logon" :disabled="!checked">登录</button>
      </form>
    </div>

  </div>

</template>

<script>
        import request from '../../utils/request.js'
export  default{
  name:'Login',
  data(){
    return{
        model:{
          name:"",
          pwd: ""
        },
            checked:false
    }
  },
  methods:{
    logon(){
      request({
              url:"/user/login_pwd",
              method:"post",
              data:this.model
      })
          .then(token => {

            sessionStorage.setItem('token', token);
            sessionStorage.setItem("use", JSON.stringify(this.model))
            this.$router.replace(this.$route.query.target || "/profile")
          })
          .catch(()=>{});
    },
hidden(){
            if(!checked){
              this.data.active=true
            }else{
                  this.active=false
            }
}
  }
}
</script>


<style scoped>
.container{width: 100vw; height: 100vh;}
.header{height: 40px}
.title{display: flex; justify-content: center; padding-bottom: 20px; }
.title h4{color: rgba(0,0,0,1);
  font-size: 20px;
  font-weight: 600;}
.log{display: flex; flex-direction: column; align-items: center; padding: 10px 0 48px 0; background: url("./background.d3d7d2dd.png" ) center no-repeat}
.log span{width: 48px; height: 48px; }
.log img{width: 100%;}
.log p{margin-top: 16px;}
.content{display: flex; flex-direction: column; padding: 0 30px;}
form{display: flex; flex-direction: column;}
form div{display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-around;}
form div>span{color: rgba(0,0,0,0.6);
  font-size: 14px;
  font-weight: normal;

}
form>input{height: 50px; background: rgba(240,240,240,1); border: 0; margin-top: 12px; padding: 0 14px; box-sizing: border-box}
.content button{height: 36px; border-radius: 36px; margin-top: 20px;
  background-color: #0B84FF; border: 1px solid #0B84FF;}
.active{
	background-color: #0aeeff  !important;
	border: 1px solid #0aeeff  ;
}

</style>
